<template>
  <div class="container">
    <el-card v-loading="loading" class="el-card__body">
      <!-- 顶部导航栏  搜索关键字 -->
      <el-row class="row">
        <el-col :span="20"><div class="grid-content bg-purple" />
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input v-model="formInline.keyname" />
            </el-form-item>
            <el-form-item label="状态" class="form">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button small @click="clear">清除</el-button>
              <el-button type="primary" small @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">

            <el-button type="success" small @click="onSubmit">
              <i class="el-icon-edit" />
              新增文章
            </el-button>

          </el-row>
        </el-col>
      </el-row>
      <!-- 中间alert狂 显示宗数据 -->
      <el-alert
        :title="`总共有${form.counts}条`"
        type="info"
        :closable="false"
        show-icon
      />
      <!-- 底部表格 -->
      <el-table

        class="table"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          :index="changeIndex"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="title"
          label="文章标题"
          width="180"
        >
          <template v-slot="{row}">
            {{ row.title }}
            <a v-if="row.videoURL" href="#" class="el-icon-film" @click.prevent="openVideo(row.videoURL)" />
          </template>
        </el-table-column>
        <el-table-column
          prop="visits"
          label="阅读数"
        />
        <el-table-column
          prop="username"
          label="录入人"
        >
          <template v-slot="{row}">
            {{ role.find(item =>+item.id===row.creatorID).value }}
          </template>
        </el-table-column>

        <el-table-column

          label="录入时间"
        >
          <template v-slot="{row}">
            {{ row.createTime |time }}
          </template>
        </el-table-column>
        <el-table-column

          label="状态"
        >
          <template v-slot="{row}">
            {{ row.state===1?'已启用':'已禁用' }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template v-slot="{row}">
            <el-button type="text" @click="showPreviewDialog(row)">预览</el-button>
            <el-button type="text" @click="changeState(row)">{{ row.state===1?'禁用':'启用' }}</el-button>
            <el-button :disabled="row.state===1" type="text" @click="editShow(row)">修改</el-button>
            <el-button :disabled="row.state===1" type="text" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="table" type="flex" justify="end">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :total="total"
          :page-size="pagesize"
          :current-page="page"
          :page-sizes="[5, 7, 10, 15]"
          @current-change="changeFn"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <!-- 文章预览的弹窗组件 -->
    <articlesPreview ref="articlesPreview" :detail="detail" />
    <!-- 添加文章 编辑 -->
    <articlesAdd ref="articleAdd" @update="update" />
    <!-- 视频 -->
    <div v-if="showVideo" class="video-preview">
      <div class="close" @click.stop="closeVideo()"><span class="el-icon-close" /></div>
      <div class="box">
        <video ref="video" :src="videoUrl" controls />
      </div>
    </div>
  </div>
</template>

<script>
// list 获取文章列表
// remove 删除文章
// changeState 改变状态
// update 文章修改
//  add  文章添加
//  detail  文章详情
// simple  文章简单列表
import { list, remove, detail, changeState } from '@/api/hmmm/articles'
import { status } from '@/api/hmmm/constants'
import hiretype from '@/api/base/baseApi'
import articlesPreview from '../components/articles-preview.vue'
import articlesAdd from '../components/articles-add.vue'
export default {
  components: {
    articlesPreview,
    articlesAdd
  },
  data() {
    return {
      formInline: {
        keyname: ''

      },
      value: '',
      tableData: [],
      form: {
        counts: ''
      },

      pagesize: 5,
      page: 1,
      total: 0,
      loading: false,
      status: status,
      role: hiretype.role,
      detail: {},
      videoUrl: '',
      showVideo: false

    }
  },
  created() {
    this.list()
  },
  methods: {
    search() {
      this.list()
    },
    clear() {
      this.formInline.keyname = ''
    },
    onSubmit() {
      // console.log('submit!')
      this.page = 1
      this.list()

      this.$refs.articleAdd.showDialog = true
    },
    editShow(row) {
      this.id = row.id
      // console.log(this.id)
      this.$refs.articleAdd.open(row)
    },
    async  list() {
      this.loading = true
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.formInline.keyname
      })
      // console.log(data)
      this.tableData = data.items
      this.form = data
      this.total = data.counts
      this.loading = false
    },
    changeFn(value) {
      this.page = value
      this.formInline.keyname = ''
      this.list()
    },
    changeIndex(index) {
      return index + 1 + (this.page - 1) * this.pagesize
    },
    handleSizeChange(value) {
      console.log(value)
      this.pagesize = value
      this.formInline.keyname = ''
      this.list()
    },
    // 删除文章
    async del(row) {
      try {
        await this.$confirm('你确定要删除吗', '温馨提示', { type: 'warning' })
      } catch {
        return
      }

      await remove({ id: row.id })
      this.$message.success('删除成功')
      this.list()
    },

    // 预览弹窗
    async showPreviewDialog(row) {
      this.$refs.articlesPreview.showPreview = true
      // 发请求求拿到数据详情
      const res = await detail({ id: row.id })
      // console.log(res)
      this.detail = res.data
    },
    // 切换状态
    async  changeState(row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      // console.log(res)
      this.$message.success('切换成功')
      this.tableData.state = row.state === 1 ? 0 : 1
      this.list()
    },
    // 添加成功后重新渲染列表
    update() {
      this.list()
    },
    // 视频
    openVideo(url) {
      this.showVideo = true
      // console.log(url)
      this.videoUrl = url
      // console.log('dfg')
      // console.log(this.$refs.video)
    },
    closeVideo() {
      this.showVideo = false
      this.$refs.video.pause()
    }
  }
}
</script>

<style scoped lang='scss'>
 .container{
   padding: 20px;
 .el-card__body{
   padding: 20px;
 }
 .table{
   margin-top: 15px;
 }
 .row{
   padding-left: 40px;
 }
 .form {
   margin-left: 30px;
 }
 }
 .video-preview{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%,0);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    z-index: 9999;
  }
  .box{
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    video{
      width: 100%;
      height: 100%;
    }
  }
}

</style>
